<template>
  <!-- 添加或修改岗位对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="cancel"
    width="500px"
    append-to-body
  >
    <el-descriptions title="基本信息">
      <el-descriptions-item
        v-for="item in baseInfo"
        :key="item.label"
        :label="item.label"
      >
        <text-over-hidden-tooltip :text="item.value" />
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="账单信息" v-if="billDetails && billDetails.length > 0">
      <el-descriptions-item
        v-for="item in billDetails"
        :key="item.id"
        :label="item.name"
      >
        <text-over-hidden-tooltip :text="'￥' + item.price + '元'" />
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="账单金额" :column="2">
      <el-descriptions-item
        v-for="item in billPrice"
        :key="item.label"
        :label="item.label"
      >
        <text-over-hidden-tooltip
          class="show"
          :text="'￥' + item.value + '元'"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
<script>
export default {
  name: "preview",
  props: {},
  data() {
    return {
      visible: false,
      title: "",
      // 表单参数
      form: {},
    };
  },

  mounted() {},

  methods: {
    open(data) {
      this.visible = true;
      this.title = "账单详情";
      this.form = data;
    },
    // 取消按钮
    cancel() {
      this.visible = false;
    },
  },
  computed: {
    billDetails() {
      return this.form.spendDetails;
    },
    baseInfo() {
      return [
        {
          label: "账单编号",
          value: this.form.billId,
        },
        {
          label: "账单日期",
          value: this.form.spendingTime,
        },
        {
          label: "用户名称",
          value: this.form.createBy,
        },
      ];
    },
    billPrice() {
      return [
        {
          label: "填写金额",
          value: this.form.spendingPrice || this.form.actualAmount,
        },
        {
          label: "实际金额",
          value: this.form.actualAmount,
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__container .el-descriptions-item__content {
  width: 80px;
}
.show {
  font-weight: 700;
  color: red;
}
</style>
